import screenfull from "screenfull";
import { MessagePlugin, Button } from "tdesign-react";
import { useEffect, useState } from "react";
import { Fullscreen2Icon, FullscreenExit1Icon } from "tdesign-icons-react";
{
	/* <Fullscreen2Icon />
<FullscreenExit1Icon /> */
}
const Fullscreen = () => {
	const [fullScreen, setFullScreen] = useState<boolean>(screenfull.isFullscreen);

	useEffect(() => {
		screenfull.on("change", () => {
			if (screenfull.isFullscreen) setFullScreen(true);
			else setFullScreen(false);
			return () => screenfull.off("change", () => {});
		});
	}, []);

	const handleFullScreen = () => {
		if (!screenfull.isEnabled) MessagePlugin.warning("当前您的浏览器不支持全屏 ❌");
		screenfull.toggle();
	};
	return (
		<Button variant="text" onClick={handleFullScreen}>
			{fullScreen ? <FullscreenExit1Icon /> : <Fullscreen2Icon />}
		</Button>
	);
};
export default Fullscreen;
